<template>
  <div class="home">
    <topNav />
    <banner :data="banner" />
    <div class="category-list">
    <van-grid :column-num="5">
      
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285461/cs.png" />
        <span>新蜂超市</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285468/fs.png" />
        <span>新蜂服饰</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285470/qq.png" />
        <span>全球购</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285472/sx.png" />
        <span>新蜂生鲜</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285467/dj.png" />
        <span>新蜂到家</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285465/cz.png" />
        <span>新蜂到家</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285469/pt.png" />
        <span>新蜂到家</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285468/juan.png" />
        <span>新蜂到家</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285471/sq.png" />
        <span>新蜂到家</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="//s.weituibao.com/1583585285470/qb.png" />
        <span>新蜂到家</span>
      </van-grid-item>
    </van-grid>
    </div>
    <goodsList
      title="新品上线"
      :list="newGoodses"
    />
    <goodsList
      title="热门商品"
      :list="hotGoodses"
    />
    <goodsList
      title="最新推荐"
      :list="recommond"
    >
     <template #default='slotScope'>
       <van-image :src='slotScope.data.goodsCoverImg' />
        <h5>{{slotScope.data.goodsName}}</h5>
     </template>
    </goodsList>
  </div>
</template>

<script>
// @ is an alias to /src
import { indexInfo } from "../api/home";
import topNav from "../components/home/topNav";
import banner from "../components/home/banner";
import goodsList from "../components/home/goodsList"
import Goodlist from './Goodlist.vue';
export default {
  name: "Home",
  data() {
    return {
      banner: [],
      newGoodses: [],
      hotGoodses: [],
      recommond: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      indexInfo().then((data) => {
        if (data.resultCode == 200) {
          this.banner = Object.freeze(data.data.carousels);
          this.newGoodses = Object.freeze(data.data.newGoodses);
          this.hotGoodses = Object.freeze(data.data.hotGoodses);
          this.recommond = Object.freeze(data.data.recommendGoodses);
        }
      });
      console.log();
    },
  },
  components: {
    topNav,
    banner,
    goodsList,
  },
};
</script>
<style lang="less">
.category-list{
  font-size: 12px;
  .van-image__img{
    width: 40px;
    height: 40px;
  }
}
</style>
